:root {
    --predoova:#326eb7;
    --bg:#eaeaea;
    --lightBg:#fff;
    --softHoverBg:#ededed;
    --txt:#363636;
    --txtLight:#777;
    --borderLight:#ccc;
    --softHoverTxt:#464646;
    --lineColor:#ccc;
    --lineColorSoft:#eaeaea;
    --shadow:rgba(0,0,0,0.15);
    --checkedBg:#2196F3;
    --checkedButton:#fff;
    --menuHoverBg:#bdcfe5;
    --hoverFixedBg:rgba(255,255,255,0.5);
    --connectHeadTxt:#fff;
    --userLogedinTxt:#fff;
    --softwareIconBg:rgba(250,250,250,0.5);
    --softwareIconActive:rgba(50,110,183,0.8);
}
body { background:var(--bg); color:var(--txt); }
header { position:fixed; z-index:101; top:0; left:0; right:0; height:48px; display:flex; justify-content:flex-start; align-items:center; animation: animateAmiga 2s linear infinite; padding:2px 0 0 0; background:url(pif|amiga.png) var(--lightBg) no-repeat top left / 100% 2px; transition:.4s; }
@keyframes animateAmiga { 0% {background-size:100% 3px} 50% {background-size:200% 3px; background-position:top right; } 100% {background-size:100% 3px} }
.logo { display:inline-block; width:132px; height:24px; overflow:hidden; margin:0 0 0 15px; }
.logo > image { width:auto; height:24px; }
.logoLogedin { display:inline-block; width:50px; height:26px; overflow:hidden; margin:0 0 0 15px; border-right:1px solid  var(--lineColor); }
.logoLogedin > image { width:35px; height:26px; }
.motto { display:flex; justify-content:flex-start; align-items:center; height:calc(100% - 16px); margin:0 0 0 6px; padding:0 0 0 6px; border-left:1px solid var(--lineColor); color:var(--txtLight); font-size:75%; }
.nav-items { display:flex; justify-content:flex-start; align-items:center; height:100%; margin:0 15px 0 auto; }
.nav-item { color:var(--txtLight); }
.nav-item:hover { color:var(--softHoverTxt); }
.nav-lang { display:flex; justify-content:center; align-items:center; height:24px; padding:.2rem .5rem; margin:0 10px 0 0; cursor:pointer; }
.nav-lang:hover {  background:var(--softHoverBg); }
.nav-lang span { display:flex; justify-content:center; align-items:center; height:100%; }
.nav-lang icon { font-size:16px; padding:.4rem 0 0 .2rem; }
.menu-lang { position:absolute; z-index:110; display:block; width:57px; height:0px; background:var(--lightBg); top:50px; margin:-0.5rem 0 0 0; overflow:hidden; transition:.4s; }
.menu-lang-open { height:95px !important; border:1px solid var(--lineColorSoft); }
.menu-lang-item { display:block; width:100%; height:18px; padding:.4rem 0; text-align:center; line-height:18px; font-weight:600; border-bottom:1px solid var(--softHoverBg); cursor:pointer; }
.menu-lang-item:hover { background:var(--softHoverBg); }
.software-icons { display:flex; justify-content:flex-start; align-items:center; flex:1; height:100%; margin:0 15px; }
.software-icon { position:relative; z-index:10; display:inline-block; width:32px; height:32px; margin:0 15px 0 0; cursor:pointer; transform-style: preserve-3d; }
.software-icon:after { position:absolute; z-index:-1; display:inline-block; content:" "; width:44px; height:42px; margin:-5px 0 0 -5px; border-bottom:2px solid transparent; transform: translateZ(-1px); transition:.4s; }
.software-icon:hover:after { background:var(--softwareIconBg); }
.software-icon-active:after { border-bottom:2px solid var(--softwareIconActive) !important; background:var(--softwareIconBg) !important; }
.menu { position:relative; z-index:1; display:block; width:22px; height:22px; margin:0 15px 0 25px; overflow:hidden; }
.menu > span { position:absolute; z-index:2; display:block; width:22px; height:2px; background:var(--txtLight); transition:.4s; }
.menu > span:nth-child(1) { margin:2px 0 0 0; }
.menu > span:nth-child(2) { margin:8px 0 0 0; }
.menu > span:nth-child(3) { margin:14px 0 0 0; }
.userLogedin { display:inline-block; width:28px; height:28px; line-height:28px; text-align:center; border-radius:50%; font-size:14px; color:var(--userLogedinTxt); font-weight:bold; overflow:hidden; border:1px solid var(--lineColorSoft); cursor:pointer; }
.menu:hover > span { background:var(--softHoverTxt); }
.menu-open > span:nth-child(1) { transform:rotate(-45deg); margin:9px 0 0 0; }
.menu-open > span:nth-child(2) { opacity:0; }
.menu-open > span:nth-child(3) { transform:rotate(45deg); margin:9px 0 0 0; }
.menu-user { position:absolute; z-index:110; display:block; width:250px; height:0px; background:var(--lightBg); top:50px; right:0px; overflow:hidden; transition:.4s; }
.menu-navigation { position:fixed; z-index:109; width:0px; top:50px; right:0; bottom:0; border-top:1px solid var(--lineColorSoft); background:var(--lightBg); overflow:hidden; transition:.4s; }
.menu-user-open { height:150px !important; border:1px solid var(--lineColorSoft); }
.menu-navigation-open { width:300px !important; border-left:1px solid var(--lineColorSoft);  }
.menu-user-item { display:flex; justify-content:flex-start; align-items:center; padding:7px 12px; font-size:90%; color:var(--txtLight); }
.menu-user-item:hover { color:var(--txt); background:var(--menuHoverBg); }
.theme { padding:2px 12px; }
.switch { position:relative; display:inline-block; width:33px; height:20px; margin:0 0 0 15px; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#ccc; -webkit-transition:.4s; transition:.4s; }
.slider:before { position: absolute; content: ""; height: 12px; width: 12px; left: 4px; bottom: 4px; background-color:var(--checkedButton); -webkit-transition: .4s; transition: .4s; }
input:checked + .slider { background-color: var(--checkedBg); }
input:focus + .slider { box-shadow: 0 0 1px var(--checkedBg); }
input:checked + .slider:before { -webkit-transform: translateX(12px); -ms-transform: translateX(12px); transform: translateX(12px); }
.slider.round { border-radius: 16px; }
.slider.round:before { border-radius: 50%; }
/* WINDOW */
.matdiv { position:fixed; z-index:999; display:flex; justify-content:center; align-items:center; top:0; left:0; right:0; bottom:0; background:var(--hoverFixedBg); transform:scale(0); transition:.4s; }
.matdiv-open { transform:scale(1); }
.win { display:block; min-width:300px; min-height:100px; background:var(--bg);  }
/* LOGIN */
.login { position:relative; width:350px; height:330px; background:#326eb7; }
.login > .close { position:absolute; z-index:10; top:5px; right:5px; opacity:.75; color:#ccc; }
.login > .close:hover { opacity:1; color:#fff; }
#particle { position:absolute; z-index:1; width:100%; height:100%; opacity:.75; }
#loginForm { position:absolute; z-index:2; width:calc(100% - 30px); height:100%; margin:0 15px;  }
#loginForm svg { filter:brightness(10); }
#loginForm > .connect { display:flex; justify-content:center; align-items:center; width:100%; margin:34px 0 20px 0;  }
#loginForm > .connect > span {display:flex; justify-content:flex-start; align-items:center; height:calc(100% - 16px); margin:0 0 0 6px; padding:0 0 0 6px; border-left:1px solid var(--connectHeadTxt); color:var(--connectHeadTxt); font-size:120%; font-weight:300; }
#loginForm > label { display:block; font-weight:600; padding:0; margin:15px 0 5px 0; color:#fff; }
#loginForm > input { display:block; width:calc(100% - 12px); height:32px; padding:0 6px; border:0px; background:#fff; color:#363636; box-shadow:inset 0 0 3px 1px rgba(0,0,0,0.2); }
#loginForm > input:placeholder-shown { font-style:italic; color:#999; }
#loginForm > input[type=button] { width:100%; padding:0; margin:25px 0 0 0; border:0; box-shadow:unset; background:rgba(50,110,183,0.5); filter:brightness(1.5); color:#fff; font-weight:600;  }
#loginForm > input[type=button]:hover { background:rgba(50,110,183,0.8) }
#loginForm > .loginStt { font-size:80%; width:100%; text-align:center; }
#loginForm > .loginStt > span { display:block; width:100%; text-align:center; background:rgba(255,255,255,0.85); margin:15px 0 0 0; padding:5px 0;font-weight:600; }
#loginForm > .loginStt > .success { background:#42aa27; color:#fff; }
#loginForm > .loginStt > .error { background:#e35b5b; color:#fff; }

/* MAIN */
.main { display:block; padding:50px 0 0 0; }